<script setup lang='ts' >
import { onMounted, watch, ref,  } from 'vue'
import { getQueryDeviceVideoFileListApi } from '/@/api/its/camera'
import { dayjs } from 'element-plus'
const props = defineProps({
    showDrawer : Boolean,
    currentItem: Object
})

const emit = defineEmits(['closeAddDialogHandler'])
interface Video {
    fileName: string
    fileUrl:string
}
const videoFileList = ref<Video[]>([])
const getQueryDeviceVideoFileListEvent = async () =>{
    const res = await getQueryDeviceVideoFileListApi(props.currentItem);
        videoFileList.value = res.data;
}

watch(
    ()=> props.showDrawer,
    (newVal)=>{
        if(!newVal) return
        getQueryDeviceVideoFileListEvent()
    }
)

const videoUrl = ref('')
const change = (val?:string) => {
    console.log(val);
    videoFileList.value.forEach((el:Video) => {
        if(el.fileName === val){
            videoUrl.value = el.fileUrl
        }
    });
}

const downloadEvent = (val : Video) => {
    var videoUrl = val.fileUrl; // 替换为你要下载的视频的URL
      var fileName =val.fileName; // 下载的文件名

      // 创建一个隐藏的a标签
      var a = document.createElement('a');
      a.style.display = 'none';
      document.body.appendChild(a);

      // 使用XMLHttpRequest下载视频
      var xhr = new XMLHttpRequest();
      xhr.open('GET', videoUrl, true);
      xhr.responseType = 'blob';

      xhr.onload = function() {
        if (xhr.status === 200) {
          // 将视频Blob对象创建一个临时URL
          var videoBlob = xhr.response;
          var url = window.URL.createObjectURL(videoBlob);

          // 设置a标签的属性，并触发点击事件进行下载
          a.href = url;
          a.download = fileName;
          a.click();

          // 释放URL对象
          window.URL.revokeObjectURL(url);
        }
      };
      xhr.send();
}

const handleClose = () => {
    videoUrl.value = '';
    emit('closeAddDialogHandler')
}

const searchTime = ref( new Date())
const disabledDate = async (time: Date) => {
    const searchDate = dayjs(time).format('YYYY-MM-DD');
    const obj = { ...props.currentItem, searchDate}
    const res = await getQueryDeviceVideoFileListApi(obj);
    videoFileList.value = res.data;
}

onMounted(() => {
    change()
});

</script>
<template>
 <el-drawer v-model="props.showDrawer" @close="handleClose" size="70%" :title="$t('gZfKguHLcj7d5mgNd2Ji')">
    <div class="drawer">
        <div class="list">
            <el-date-picker style="margin-bottom: 10px;"  v-model="searchTime" type="date" :placeholder="$t('doI7hUoENb2kfsQZbMi')"  @change="disabledDate"/>
            <template v-if="videoFileList.length">
                <ul class="videoList" v-for="item in videoFileList" :key="item.fileName">
                    <li class="fileName" @click="change(item.fileName)">{{ item.fileName.split('-')[0] + '-' + item.fileName.split('-')[1] }}</li><el-icon id="icon" @click="downloadEvent(item)"><Download /></el-icon>
                </ul>
            </template>
            <p v-else style="font-size: 12px;color: #aaa;"> {{ $t('dWwfmK3uKrFVwa7wQ48o') }}</p>
        </div>
        <p class="video">
            <video autoplay controls :src="videoUrl"></video>
        </p>
    </div>
</el-drawer>
</template>

<style scoped lang="scss">

.drawer{
    display: flex;
    box-sizing:border-box;
    width: 100%;
    height: 100%;
    .list{
        padding: 20px 4px;
        box-sizing:border-box;
        text-align: center;
        width: 220px;
        border-right: 1px solid #ccc;
        ::v-deep .el-date-editor, .el-input{
            width: 100%;
            font-size: 12px;
        }
        .videoList{
            display: flex;
            width: 100%;
            .fileName{
                margin: 10px 6px;
                list-style-type: none;
                width: 100%;
                height: 30px;
                line-height: 30px;
                font-size: 12px;
                border-radius: 4px; 
                background-color:#ecf5ff;
                color:#409eff;
                &:hover{
                    color:#f56c6c;
                    background-color: #fef0f0;
                    cursor: pointer;
                }
            }
            ::v-deep .el-icon{
                margin: auto;
                width: 40px;
                cursor: pointer;
                color: rgb(64, 158, 255)
            }
        }
    }
    .video{
        margin: auto 0;
        padding: 4px 10px;
        width: 100%;
        video{
            width: 100%;
        }
    }
}

</style>